<template>
  <div class="digital-item-component" :style="`
    --fontColor: ${option.fontColor};
    --fontSize: ${option.fontSize}px;
    --fontWeight: ${option.fontWeight};
    --itemWidth: ${option.itemWidth}px;
    --itemHeight: ${option.itemHeight}px;
    --itemBgColor: ${option.itemBgColor};
    --itemBorderWidth: ${option.itemBorderWidth}px;
    --itemBorderColor: ${option.itemBorderColor};
    --itemBorderRadius: ${option.itemBorderRadius}px;
    --fontColor1: ${option.fontColor1};
    --fontSize1: ${option.fontSize1}px;
    --fontWeight1: ${option.fontWeight1};
    --margin1: ${option.margin}px;
  `">
    <div
        v-if="isNumberString"
        class="box-item"
    >
      <div class="number-text-container">
        <!--动态切换效果-->
        <template v-if="option.animation">
          <div
              v-for="num in 10"
              :key="num"
              class="number-value"
              :style="numberDynamicStyle"
          >
            {{ num - 1 }}
          </div>
        </template>
        <div class="number-value">{{ data }}</div>
      </div>
    </div>
    <div class="comma-item" v-else>{{ data }}</div>
  </div>
</template>

<script setup lang="ts">
import {computed, PropType} from "vue";

const props = defineProps({
  data: {
    type: String,
    default: '0'
  },
  option: {
    type: Object,
    default: () => ({})
  }
})

const isNumberString = computed(() => {
  const numberValue = Number(props.data);
  return !isNaN(numberValue);
});

// 数字动态样式
const numberDynamicStyle = computed(() => {
  let numberValue = Number(props.data);
  if (isNaN(numberValue)) {
    numberValue = 0;
  }
  return {
    transform: `translate(0, -${numberValue * 100}%)`,
    transition: "transform 1s ease-in-out"
  };
});
</script>
<style lang="scss" scoped>
.digital-item-component {

  .box-item {
    width: var(--itemWidth);
    height: var(--itemHeight);
    font-size: var(--fontSize);
    font-weight: var(--fontWeight);
    line-height: 1;
    border-radius: var(--itemBorderRadius);
    color: var(--fontColor);
    background-color: var(--itemBgColor);
    position: relative;
    overflow: hidden;
    border: var(--itemBorderWidth) solid var(--itemBorderColor);

    .number-text-container {
      display: flex;
      flex-direction: column;
      flex-wrap: wrap;

      .number-value {
        flex: none;
        width: var(--itemWidth);
        height: var(--itemHeight);
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
  }

  .comma-item {
    display: inline-flex;
    margin-right: var(--margin1);
    text-align: center;
    font-size: var(--fontSize1);
    font-weight: var(--fontWeight1);
    color: var(--fontColor1);
  }

}
</style>